<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第四个 ECharts 实例  漏斗图 </title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/5.1.1/echarts.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <dvi class="container">
        <div class="container">
            <label>Apache ECharts 4 - 漏斗图 </label>
        </div>

        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="echartsDemo" class="breadcrumb" style="width: 600px;height:400px;"></div>
    </dvi>
   
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echartsDemo'));
 
        myChart.setOption({
                title: {
                    // 主标题 副标题
                    text: '漏斗图',
                    subtext: '纯属虚构'
                },
                tooltip: {
                    // 提示框
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c}%"
                },
                toolbox: {
                    // 工具栏 导出图片 数据视图 动态类型切换 数据区域缩放 重置
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                legend: {
                    // 图例组件 
                    data: ['展现','点击','访问','咨询','订单']
                },

                series: [
                // 漏斗图 
                    {
                        name:'漏斗图',
                        type:'funnel',
                        left: '10%',
                        top: 60,
                        //x2: 80,
                        bottom: 60,
                        width: '80%',
                        // height: {totalHeight} - y - y2,
                        min: 0,
                        max: 100,
                        minSize: '0%',
                        maxSize: '100%',
                        sort: 'descending',
                        gap: 2,
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        labelLine: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: 'solid'
                            }
                        },
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        emphasis: {
                            label: {
                                fontSize: 20
                            }
                        },
                        data: [
                            {value: 60, name: '访问'},
                            {value: 40, name: '咨询'},
                            {value: 20, name: '订单'},
                            {value: 80, name: '点击'},
                            {value: 100, name: '展现'}
                        ]
                    }
                ]
        })
    </script>
</body>
</html>